<style>
    #container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 0;
        box-sizing: border-box;
    }

    ::-webkit-scrollbar { /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
    }

    ::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

    .fsh-rightPanel {
        background: white;
    }

    .layui-form {
        width: 30%;
    }

    #editor-content {
        height: 500px;
        width: 1000px;
    }

    #btn-add {
        position: absolute;
        right: 50px;
        top: 50px;
    }

    #img {
        margin-top: 20px;
        width: 200px;
        height: 100px;
        border: 1px solid #E3E3E3;
    }
</style>
<div id="container" class="fsh-rightPanel">
    <div class="top">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>课程基本信息</legend>
        </fieldset>
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label"><i>*</i>课程分类</label>
                <div class="layui-input-block">
                    <input type="hidden" name="major_id" id="kindId" lay-verify="required">
                    <input type="text" lay-verify="required" placeholder="请选择"
                           autocomplete="off" class="layui-input" readonly id="kindTitle">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i>*</i>课程名称</label>
                <div class="layui-input-block">
                    <input type="text" name="course_task" lay-verify="required" placeholder="请输入标题"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><i>*</i>课程封面</label>
                <div class="layui-input-block">
                    <input type="hidden" name="img_url" id="imgUrl" lay-verify="required">
                    <button id="btn-upload" class="layui-btn">上传</button>
                    <div>
                        <img src="" id="img" alt=""/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i>*</i>课程难度</label>
                <div class="layui-input-block">
                    <select  name="difficulty_level">
                        <option value="0">1级</option>
                        <option value="1">2级</option>
                        <option value="2">3级</option>
                        <option value="3">4级</option>
                        <option value="4">5级</option>
                        <option value="5">6级</option>
                        <option value="6">7级</option>
                        <option value="7">8级</option>
                        <option value="8">9级</option>
                        <option value="9">10级</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">课程描述</label>
                <div class="layui-input-block">
                    <script id="editor-content" type="text/plain"></script>
                </div>
            </div>
            <button class="layui-btn layui-btn-normal" id="btn-add" lay-submit lay-filter="add">确定</button>
        </div>
    </div>
</div>


<script>
    var ue = UE.getEditor('editor-content');
    var hash = location.hash;
    layui.use(['upload', 'layer', 'form', 'element'], function () {
        var layer = layui.layer;
        var upload = layui.upload;
        var form = layui.form;
        var element = layui.element;
        form.render();
        form.on('submit(add)', function (data) {
            form.validate();
            data.field.parent_id = 0;
            data.field.course_introduction = ue.getContent();
            createNewCourseware(data);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //执行实例
        upload.render({
            elem: '#btn-upload'
            , url: context + '/api/fileupload/add'
            , field: 'attach'
            , done: function (res) {
                //如果上传失败
                if (res.success) {
                    $('#img').attr('src', res.link);
                    $('#imgUrl').val(res.link);
                } else {
                    layui.layer.msg('上传失败');
                }
            }, error: function () {
                //演示失败状态，并实现重传
            }
        });

        var parentId = '';
        $("#kindTitle").click(function () {
            showDialog({
                title: '选择父级菜单'
                , template: 'views/category/template/menu.html'
                , yes: function (index, layero) {
                    var res = callbackdata();
                    layer.close(index);
                    parentId = res.key;
                    $("#kindTitle").val(res.title);
                    $("#kindId").val(parentId);
                }
            });

        });
        //销毁实例
        window.addEventListener('hashchange', destroy, false);
    });

    //新建课程
    function createNewCourseware(data) {
        $.ajax({
            url: context + '/api/educourse/insertOne',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json;charset-UTF-8",
            data: JSON.stringify(data.field),
            success: function (result) {
                if (result.success) {
                    layer.msg("添加成功");
                    jump('views/static/courseware/courseware');
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("添加失败");
            }
        })
    }

    function destroy() {
        if (location.hash !== '#' + hash && ue !== undefined) {
            UE.delEditor('editor-content');
            window.removeEventListener('hashchange', destroy);
        }
    }
</script>
